<template>
  <div>
    <el-input
        placeholder="请输入内容"
        v-model="input"
        class="input-with-select">
    <el-button slot="append" icon="el-icon-search" @click="index"></el-button>
    </el-input>

    <div>
      <el-tag @click="qb">全部</el-tag>&emsp;
      <span v-for="i,j in lst" :key="j">
        <span><el-tag @click="avc(i.name)">{{i.name}}</el-tag>&emsp;</span>
      </span>
    </div>

    <template>
        <el-table :data="tableData" style="width: 100%">

            <el-table-column prop="id" label="订单号" width="180">
            </el-table-column>

            <el-table-column prop="title" label="标题" width="180">
            </el-table-column>

            <el-table-column prop="desc" label="描述">
            </el-table-column>
        
            <el-table-column prop="budget" label="金额">
            </el-table-column>

            <el-table-column prop="label" label="标签">
            </el-table-column>
        </el-table>
    </template>
    <van-pagination v-model="currentPage" :total-items="total" :items-per-page="page_size" @change="getserver_page" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: "",
      tableData:[],
      currentPage:0,
      page_size:2,
      total:0,
      flag:1,
      lst:[],


    };
  },
  methods: {
    qb(){
      this.flag = 1
      this.input = ''
      this.getserver_page()
    },
    avc(name){
      this.flag = 2
      this.input = name
      this.index()
    },
    index(){
        this.flag = 2
        this.axios.get('/label_index?input=' + this.input + '&page=' + this.currentPage + '&page_size=' + this.page_size).then(resp=>{
            console.log(resp)
            this.tableData = resp.data.data
            this.total = resp.data.total
        })
    },

    getserver_page(){
        if(this.flag == 1){
            this.axios.get('/server_all?page=' + this.currentPage + '&page_size=' + this.page_size).then(resp=>{
            console.log(resp)
            this.tableData = resp.data.data
            this.total = resp.data.total
        })
        }else{
            this.axios.get('/label_index?input=' + this.input + '&page=' + this.currentPage + '&page_size=' + this.page_size).then(resp=>{
            console.log(resp)
            this.tableData = resp.data.data
            this.total = resp.data.total
        })
        }
    },
    getnell_label(){
            this.axios.get('/home_label').then(resp=>{
                console.log(resp)
                this.lst = resp.data.data
            })
        },
  },
  mounted() {
    this.getnell_label()
    this.getserver_page()
    this.input = this.$route.query.name;
    if(this.input != "" || this.input != null){
      this.flag = 2
      this.axios.get('/label_index?input=' + this.input + '&page=' + this.currentPage + '&page_size=' + this.page_size).then(resp=>{
            console.log(resp)
            this.tableData = resp.data.data
            this.total = resp.data.total
        })
    }
  },
};
</script>

<style>
.bg-purple-light {
  background: #e5e9f2;
  margin: auto;
}
</style>